import React from 'react';

class StateUpdateLife extends React.Component {

    state = {
       msg: 'hello'
    };

    render() { 
        console.log('更新阶段-3-render-渲染');
        return (
            <>
              <h2>{this.state.msg}</h2>
              <button onClick={ () => this.setState({ msg: '你好' }) }>更新数据</button>
            </>
        );
    }
    
    shouldComponentUpdate(nextProps, nextState){
        console.log('更新阶段-1-shouldComponentUpdate-决定是否可以更新');
        return this.state.msg !== nextState.msg;
    }

    UNSAFE_componentWillUpdate(){
        console.log('更新阶段-2-componentWillUpdate-组件即将更新');
    }

    componentDidUpdate(){
        console.log('更新阶段-4-componentDidUpdate-组件已更新');
    }
}
 
export default StateUpdateLife;